<template>
  <div>
    <home-header v-model="currentCategory"></home-header>
    <div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(slide, index) in slides" :key="index">
          <img :src="slide.url" alt="" class="slide-img" />
        </van-swipe-item>
      </van-swipe>
      <p>Home</p>
      {{ category }}
    </div>
  </div>
</template>

<script>
import HomeHeader from "./home-header";
import {createNamespacedHelpers} from 'vuex'
import * as types from '../../store/action-type'
const {mapState, mapMutations, mapActions} = createNamespacedHelpers('home')
export default {
  name: "index",
  computed: {
    ...mapState(['category', 'slides']),
    currentCategory: {
      get() {
        return this.category
      },
      set(newCategory) {
        this[types.SET_CATEGORY](newCategory)
      }
    }
  },
  async mounted() {
    if (!this.slides.length) {
      try {
         this[types.SET_SLIDES]()
      } catch (err) { // 错误处理
         console.log(err)
      }
    }
  },
  data() {
    return {
      value: -1
    }
  },
  components: {HomeHeader},
  methods: {
    // menuChange(newMenu) {
    //   this.value = newMenu
    // },
    ...mapMutations([types.SET_CATEGORY]),
    ...mapActions([types.SET_SLIDES])
  }
}
</script>

<style scoped>
.slide-img {
  width: 100%;
}
</style>